import { reactive, onMounted, defineComponent, toRefs, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import locationApi from '@/api/inwarehouse/location-api'
import areaApi from '@/api/inwarehouse/area-api'
import warehouseApi from '@/api/inwarehouse/warehouse-api'
import ZlrtTable from '@/components/zlrt-table/table.vue'
import ZlrtSearch from '@/components/zlrt-search/search.vue'
import TableContext from '@/components/zlrt-table/table-context'

export default defineComponent({
  components: {
    ZlrtTable,
    ZlrtSearch
  },
  setup() {
    const typeOptions = [
      { label: '存货区', value: '0' },
      { label: '入库区', value: '1' },
      { label: '出库区', value: '-1' }
    ]

    const ctx = reactive(new TableContext(getCurrentInstance(), {
      title: '库位',
      api: locationApi,
      columns: [
        { prop: 'warehouseName', label: '仓库', valueType: 'slot', width: 200 },
        { prop: 'areaName', label: '库区', valueType: 'slot', width: 200},
        { prop: 'areaType', label: '库区类型', slot: true, options: typeOptions,  width: 100 },
        { prop: 'locationName', label: '库位名称'},
        { prop: 'locationCode', label: '库位编码', valueType: 'input', width: 120 },
        { prop: 'operation', label: '操作', slot: true, width: 150 }
      ],
      rules: {
        warehouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
        areaId: [{ required: true, message: '请选择库区', trigger: 'change' }],
        locationCode: [{ required: true, message: '请输入库位编码', trigger: 'blur' }],
        locationName: [{ required: true, message: '请输入库位名称', trigger: 'blur' }],
        disabled: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      other: {
        statusChanged: (row) => {
          const { name, disabled } = row
          ElMessageBox.confirm(`确认要${disabled ? '停用' : '启用'}"${name}"${ctx.title}吗？`, '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true
          })
            .then(async () => {
              const res = await locationApi.save(row)
              if (res.code === 200) {
                ElMessage.success(`${disabled ? '停用' : '启用'}成功`)
              } else {
                row.disabled = !disabled
              }
            })
            .catch(() => {
              row.disabled = !disabled
            })
        },
        getTypeName(val) {
          if(val === '') {
            return '-'
          }
          return typeOptions.find(item => {
            return item.value === val
          }).label
        },
        handleWarehouse(val) {
          const obj = data.warehouseOptions.find(item => {
            return item.id === val
          })
          ctx.editData.warehouseName = obj['name']
        },
        handleArea(val) {
          const obj = data.areaOptions.find(item => {
            return item.id === val
          })
          ctx.editData.areaName = obj['name']
          ctx.editData.areaType = obj['type']
        }
      }
    }))

    const data = reactive({
      ctx,
      typeOptions,
      areaOptions: [],
      warehouseOptions: []
    })

    const getAreaList = async() => {
      const params = { filter: { disabled: false } }
      const res = await areaApi.list(params)
      data.areaOptions = res.data.records
    }

    const getWarehouseList = async () => {
      const params = { filter: { disabled: false } }
      const res = await warehouseApi.list(params)
      data.warehouseOptions = res.data.records
    }

    // init
    onMounted(() => {
      getWarehouseList()
      getAreaList()
      ctx.loadData()
    })

    return {
      ...toRefs(data)
    }
  }
})
